<script setup>
import { onMounted, ref } from "vue";

// 草稿宽高
const width = 1440
const height = 1024
const zoom = ref(1)

const init = () =>{
  let W = window.innerWidth;
  let H = window.innerHeight;
  let zoomW = W/width
  let zoomH = H/height
  zoom.value = Math.min(zoomH,zoomW)
}
init()
onMounted(()=>{
  window.onresize=()=>{
    init()
  }
})
</script>

<template>
  <div class="screen-root">
    <div :style="{ zoom:zoom }" class="screen">
      <RouterView />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.screen-root{
  width: 100vw;
  height: 100vh;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
  .screen{
    width: 1440px;
    height: 1024px;
    background-color: #fff;
  }
}
</style>
